<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
    <link rel="icon" type="image/png" href="./assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Anchor Bootstrap 4.1.3 UI Kit by WowThemesNet</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <!-- Main CSS -->
    <link href="./assets/css/main.css" rel="stylesheet"/>

    <!-- Animation CSS -->
    <link href="./assets/css/vendor/aos.css" rel="stylesheet"/>

</head>

<body>

<!------------------------------------------
NAVBAR:不用改
------------------------------------------->

<!------------------------------------------
HEADER
------------------------------------------->
<div class="jumbotron jumbotron-lg jumbotron-fluid mb-3 bg-primary position-relative">
    <div class="container text-white h-100 tofront">
        <div class="row align-items-center justify-content-center text-center">
            <div class="col-md-10">
                <!-- thymeleaf语法:渲染文章题目 -->
                <h1>慕课网GEO地理位置直播视频与文字版记录</h1>
            </div>
        </div>
    </div>
</div>



<div class="container  pt-5 pb-5" data-aos="fade-up">
    <div class="row justify-content-center">
        <div class="col-md-8 mt-20">
            <article>
                <!-- 此处渲染标题 -->
                <h1><strong>Bold title</strong> for your paragraph</h1>
<!--                <p th:text="${article.content}">Welcome to BeiJing!</p>-->
                <tbody>
                    <td><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><br class="Apple-interchange-newline">视频已经由慕课网上传至B站，免费高清，地址为：<a href="https://www.bilibili.com/video/BV1Lz411b7cN%E3%80%82%E4%BB%A5%E4%B8%8B%E9%83%BD%E6%98%AF%E6%96%87%E5%AD%97%E7%89%88%E7%AC%94%E8%AE%B0%E3%80%82" style="color: rgb(70, 70, 70);">https://www.bilibili.com/video/BV1Lz411b7cN。以下都是文字版笔记。</a></p><h2 id="toc_1" style="font-size: 21px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">《Elasticsearch极速入门与基于百度地图的geo地理位置搜索》</h2><h3 id="toc_2" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">1. es介绍</h3><ul style="list-style: none; margin-right: 0px; margin-bottom: 0px; margin-left: 30px; padding: 0px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;"><code>互动</code>：什么是搜索：</p><ul style="list-style: none; margin-right: 0px; margin-left: 30px; padding: 0px;"><li style="list-style-type: circle;">百度谷歌，都是搜索引擎。</li><li style="list-style-type: circle;">垂直搜索，站内，比如淘宝京东站内搜索商品。</li></ul></li><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">什么是ES：<br>Elasticsearch 是一个分布式可扩展的实时搜索和分析引擎，底层基于lucene。</p><ul style="list-style: none; margin-right: 0px; margin-left: 30px; padding: 0px;"><li style="list-style-type: circle;">可以存储文档，用于海量数据检索</li><li style="list-style-type: circle;">可以近实时的分析数据</li><li style="list-style-type: circle;">可扩展性（几百个节点甚至上千）相当强大。</li><li style="list-style-type: circle;">结合ELK，实现日志收集<code>（架构师课程里有）</code></li><li style="list-style-type: circle;">地理位置geo信息搜索与监控和分析（常用于社交平台，物流快递，地图等场景）</li></ul></li><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;"><code>可以互动</code>：为什么要使用es</p><ul style="list-style: none; margin-right: 0px; margin-left: 30px; padding: 0px;"><li style="list-style-type: circle;"><code>如果用普通数据库，单表可以存多少数据比较合适？这个主要看自己自身业务，一般来说，1000万左右，但是6-700万的样子就可以开始逐步计划做数据库优化分库分表等</code>。普通搜索基于数据库，数据库单表存储能力有限，数据量越多，搜索性能越低下</li><li style="list-style-type: circle;">数据库支持模糊搜索，全表扫描遍历（es基于倒排索引，根据词汇直接把对应的文档id搜索到然后把对应的数据查询出来），不支持高亮搜索<ul style="list-style: none; margin-right: 0px; margin-left: 30px; padding: 0px;"><li style="list-style-type: circle;">我在慕课网这个网站搜索<code>spring 短视频</code></li><li style="list-style-type: circle;">词条：spring 短视频</li><li style="list-style-type: circle;">数据库不支持分词搜索，es（搜索引擎）支持</li><li style="list-style-type: circle;">db搜索不如专业的搜索引擎靠谱</li></ul></li></ul></li></ul><h3 id="toc_3" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">简单聊一聊倒排索引</h3><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><img src="https://lee-blog.oss-cn-shanghai.aliyuncs.com/2020/04/03/15833935162304.jpg" alt="-w760" style="height: auto; max-width: 100%; margin: 10px;"></p><h3 id="toc_4" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">2. es的核心术语与数据结构</h3><ul style="list-style: none; margin-right: 0px; margin-bottom: 0px; margin-left: 30px; padding: 0px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><li style="list-style-type: disc;">核心术语<ul style="list-style: none; margin-right: 0px; margin-left: 30px; padding: 0px;"><li style="list-style-type: circle;">ES --&gt; 数据库（1）</li><li style="list-style-type: circle;">索引index --&gt; 表（2）</li><li style="list-style-type: circle;">文档 document --&gt; 行（记录）（3）</li><li style="list-style-type: circle;">字段 fields --&gt; 列（4）</li><li style="list-style-type: circle;"><del>类型type</del>&nbsp;过期，也能作为表&nbsp;<img src="https://lee-blog.oss-cn-shanghai.aliyuncs.com/2020/04/03/15830320950982.jpg" alt="-w619" style="height: auto; max-width: 100%;"><img src="https://lee-blog.oss-cn-shanghai.aliyuncs.com/2020/04/03/15830321329817.jpg" alt="-w385" style="height: auto; max-width: 100%;"></li></ul></li></ul><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><img src="https://lee-blog.oss-cn-shanghai.aliyuncs.com/2020/04/03/15830321681137.jpg" alt="-w1276" style="height: auto; max-width: 100%; margin: 10px;"></p><ul style="list-style: none; margin-right: 0px; margin-bottom: 0px; margin-left: 30px; padding: 0px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><li style="list-style-type: disc;">数据结构，数据库表记录，对应es：&nbsp;<img src="https://lee-blog.oss-cn-shanghai.aliyuncs.com/2020/04/03/15830323628199.jpg" alt="-w451" style="height: auto; max-width: 100%;"></li></ul><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><br></p><h3 id="toc_5" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">3. es和head插件安装见慕课网手记</h3><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><a href="https://github.com/mobz/elasticsearch-head#running-with-built-in-server" style="color: rgb(70, 70, 70);">https://github.com/mobz/elasticsearch-head#running-with-built-in-server</a></p><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><a href="https://www.imooc.com/article/286936" style="color: rgb(70, 70, 70);">https://www.imooc.com/article/286936</a><br>这个基于centos6，架构师课程基于centos7</p><h3 id="toc_6" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">4. head插件，索引index创建与映射mappings创建</h3><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;">索引名: friends<br><img src="https://lee-blog.oss-cn-shanghai.aliyuncs.com/2020/04/03/15830449480378.jpg" alt="-w616" style="height: auto; max-width: 100%; margin: 10px;"></p><h3 id="toc_7" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">分片与集群，健康度</h3><h6 id="toc_8" style="font-size: 11px; font-weight: bold; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">*简称（附）</h6><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;">shard = primary shard（主分片）<br>replica = replica shard（副本分片）</p><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;">演示使用head来进行索引的创建</p><ul style="list-style: none; margin-right: 0px; margin-bottom: 0px; margin-left: 30px; padding: 0px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">主分片（shard）：把索引库拆分为多份，分别放在不同的节点上，比如有3个节点，3个节点的所有数据内容加在一起是一个完整的索引库。分别保存到三个节点上，目的为了水平扩展，提高吞吐量。也可以做到故障转移。ES自动管理和组织分片, 并在必要的时候对分片数据进行再平衡分配, 所以用户基本上无需担心分片的相关处理细节</p></li><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">副本分片（replica）：每个shard的备份。也可以称之为副本，ES默认为一个索引创建5个主分片, 并分别为其创建一个副本分片。意思就是说每个索引都由5个主分片（shard）形成，而每个主分片都相应的有一个备份（replica）。</p></li><li style="list-style-type: disc;"><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">分片机制<br>每个索引可以被分片，就相当于吃披萨的时候被切了好几块，然后分给不同的人吃，如下图所示：<br><img src="https://lee-blog.oss-cn-shanghai.aliyuncs.com/2020/04/03/15760315077964.jpg" alt="" style="height: auto; max-width: 100%; margin: 10px;"></p><ul style="list-style: none; margin-right: 0px; margin-left: 30px; padding: 0px;"><li style="list-style-type: circle;">索引my_doc只有一个主分片；</li><li style="list-style-type: circle;">索引shop有3个主分片；</li><li style="list-style-type: circle;">索引shop2有5个主分片。</li><li style="list-style-type: circle;">每个主分片都包含索引的数据，由于目前是单机，所以副本分片是没有的，这个时候集群健康值显示为黄色。</li><li style="list-style-type: circle;">副本分片是主分片的备份，主挂了，备份还是可以访问，这就需要用到集群了。</li><li style="list-style-type: circle;">同一个分片的主与副本是不会放在同一个服务器里的，因为一旦宕机，这个分片就没了</li><li style="list-style-type: circle;">我不知道大家有没有玩过nas，这个数据存储有点像raid机制。</li></ul></li></ul><h3 id="toc_9" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px; color: rgb(0, 0, 0); font-family: 微软雅黑, 宋体, Arial;">es 健康度</h3><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;">不同的颜色表示es不同的健康程度</p><ol style="padding-left: 40px; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><li style="list-style-type: decimal;">绿色：集群健康，所有主分片和副本分片都是可用状态。</li><li style="list-style-type: decimal;">黄色：亚健康，所有的主分片可用，但是副本分片部分不可用。</li><li style="list-style-type: decimal;">红色：不健康，主分片部分不可用。</li></ol></td>
                </tbody>
            </article>
        </div>
    </div>
</div>
<!-- End Main -->
<!--------------------------------------
JAVASCRIPTS:不用改
--------------------------------------->
<!-- CDN 引入vue 和 axios -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="./assets/js/functions.js" type="text/javascript"></script>

<!-- Animation -->
<script src="./assets/js/vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>

<script type="module">
    import { onMounted, ref } from 'vue'
    import request from '@/utils/request.js'
    defineProps({
        data: {
            type: Array,
            required: true
        }
    })
    //获取数据
    const blogs = ref([])
    const getData = async () => {
        let res = await request({
            url: '/article/2/1',
            method: 'GET'
            //data: { content: '好' }
        })
        console.log('res:', res)
        blogs.value = res.rows
        console.log('blogs', blogs)
    }

    onMounted(() => {
        getData(),
            console.log("'blogs', blogs")
    })
</script>

<!-- Disable animation on less than 1200px, change value if you like -->
<script>
    AOS.init({
        disable: function () {
            var maxWidth = 1200;
            return window.innerWidth < maxWidth;
        }
    });
    // $(document).ready(function () {
    //
    //     if(location.href.indexOf("#reloaded")==-1){
    //         location.href=location.href+"#reloaded";
    //         location.reload();
    //     }
    // })
    if (location.href.indexOf("#reloaded") == -1) {
        location.href = location.href + "#reloaded";
        location.reload();
    };
</script>

</body>
</html>